<template>
    <!-- 个人中心 -->
    <div class="mian">
        <div class="tops">
            <div style=" width: 20%;height: 100%; font-size: 17px;margin: 0.75% 0 0 1%;">
                <i class="el-icon-s-home"></i>
                <span>首页</span>
                <span>></span>
                <span>个人中心</span>
            </div>
        </div>
        <div class="box">
            <div class="left">
                <!-- 图片，用来展示用户选择的头像 -->
                <el-avatar class="the_img" v-if="!this.avatar && photo" shape="circle" :src="photo"></el-avatar>
                <el-avatar class="the_img" v-if="!photo && !this.avatar" shape="circle" :src="imageUrl"></el-avatar>
                <el-avatar class="the_img" v-if="this.avatar" shape="circle" :src="this.avatar"></el-avatar>
                <!-- 按钮区域 -->
                <div class="btn-box">
                    <input type="file" accept="image/*" style="display: none" ref="iptRef" @change="onFileChange" />
                    <el-button type="primary" @click="chooseImg">更换头像</el-button>
                </div>
            </div>
            <div class="right">
                <el-form :model="editData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                    status-icon>
                    <el-form-item label="原密码" prop="oldPwd">
                        <el-input type="password" v-model="editData.oldPwd" placeholder="请输入原密码"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-input type="password" v-model="editData.newPwd" placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="newPassword2">
                        <el-input type="password" v-model="editData.newPassword2" placeholder="请再次输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div style="display: flex;justify-content: center;align-items: center; ">
                            <el-button type="primary" @click="updatepassword('ruleForm')" size="small"
                                style="width:50% ;">
                                修改</el-button>
                            <el-button @click="resetForm('ruleForm')" size="small" style="width:50% ;">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    import store from '@/store' // 引入store对象
    import { mapGetters } from 'vuex'
    import { updatePasswordAPI, updatePhotoAPI } from "@/api";
    export default {
        computed: {
            ...mapGetters(['photo'])
        },
        data() {
            return {
                avatar: '',
                imageUrl: require('../../assets/ren.jpg'),
                editData: {
                    oldPwd: '',
                    newPwd: '',
                    newPassword2: '',
                },
                rules: {
                    oldPwd: [
                        { required: true, message: '请输入原密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                    newPwd: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                    newPassword2: [
                        { required: true, message: '请再次输入新密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                },
                rowCenter: {
                    "text-align": "center"
                },
            }
        },
        methods: {
            // 选择图片->点击事件->让选择框出现
            chooseImg() {
                // 模拟点击行为
                this.$refs.iptRef.click()
            },
            // 在选择框中选择图片后触发的改变事件
            onFileChange(e) {
                // 获取用户选择的文件列表（伪数组）
                const files = e.target.files
                if (files.length === 0) {
                    // 没有选择图片
                    this.avatar = ''
                } else {
                    // 选择了图片
                    // 1. 创建 FileReader 对象
                    const fr = new FileReader()
                    // 2. 调用 readAsDataURL 函数，读取文件内容
                    fr.readAsDataURL(files[0])
                    // 3. 监听 fr 的 onload 事件
                    fr.onload = async e => {
                        // 4. 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
                        this.avatar = e.target.result
                        // 5. 调用接口, 传递给后台并根据返回结果给用户提示
                        const { data: res } = await updatePhotoAPI(this.avatar)
                        if (res.status == 0) {
                            this.$message.success('更新头像成功！')
                        } else {
                            this.$message.error('更新头像失败！')
                        }
                        store.dispatch('initUserInfo')
                        console.log(res)
                    }
                }
            },
            async updatepassword() {
                const { data: res } = await updatePasswordAPI(this.editData)
                if (res.status === 0) {
                    this.$message({
                        showClose: true,
                        message: '修改密码成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.message)
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
    }
</script>
<style scoped>
    .btn-box {
        margin: 10px 0 0 125px;
        /* text-align: center; */
    }

    .preview {
        object-fit: cover;
    }

    .the_img {
        width: 250px;
        height: 250px;
        margin-left: 50px;
    }

    .tops>div {
        display: inline-block;
    }

    .tops {
        width: 100%;
        height: 7%;
        background-color: #fff;
    }

    .left {
        height: 60%;
        width: 30%;
        display: inline-block;
        float: left;
        margin: 4% 0 0 5%;
        /* display: flex;
        justify-content: center;
        align-items: center; */
    }

    .right {
        height: 60%;
        width: 30%;
        display: inline-block;
        margin: 4% 0 0 0;
        float: left;
    }

    .mian {
        width: 100%;
        height: 100%;
    }

    .box {
        width: 97%;
        height: 87.5% !important;
        margin: 20px;
        background-color: #FFF;
    }

    .avatar {
        width: 178px;
        height: 178px;
        margin: 0 0 10% 15%;
        display: block;
    }
</style>